<template>
  <div>
    <div class="login-box">
      <van-cell-group>
        <van-field
          v-model="username"
          label="手机号"
          icon="clear"
          placeholder="请输入用户名"
          @click-icon="username = ''"
        >
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-row class="mt-30 login-nav">
          <van-col :span="18">
            <van-field
              v-model="password"
              type="text"
              label="验证码"
              placeholder="请输入验证码"
              @click-icon="passwordIconFn"
              >
            </van-field>
          </van-col>
          <van-col class="tc" :span="6">验证码</van-col>
        </van-row>
      </van-cell-group>
      <van-button class="mt-30" size="large" type="danger">立即注册</van-button>
      <p class="tc  mt-20" href="javascript:void(0)">* 注册代表同意《蒸汽超市网络服务使用协议》</p>
    </div>
    <div class="login-box">
      <van-cell-group>
        <van-field
          v-model="password"
          :type="passObj.type"
          :icon="passObj.icon"
          label="密码"
          placeholder="请输入密码"
          @click-icon="passwordIconFn"
          >
        </van-field>
        <van-field
          v-model="password"
          :type="passObj.type"
          :icon="passObj.icon"
          label="密码"
          placeholder="请再次输入密码"
          @click-icon="passwordIconFn"
          >
        </van-field>
      </van-cell-group>
      <van-button class="mt-30" size="large" type="danger">提交</van-button>
    </div>
    
  </div>
</template>

<script>
import { CellGroup,Icon, Field ,Col,Row,Button} from 'vant'

export default {
  name: 'login',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup
  },
  data () {
    return {
      passObj:{
        icon:'password-view',
        type:'password'
      },
      username:'',
      password:''
    }
  },
  methods:{
    passwordIconFn(){
      if(this.passObj.type=='text'){
        this.passObj.icon='password-view'
        this.passObj.type='password'
      }else{
        this.passObj.icon='password-not-view'
        this.passObj.type='text'
      }
      
    }
  }
}
</script>

<style lang="less">
</style>
